import { Component,OnInit } from '@angular/core';
import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';

import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/mergeMap';
@Component({
  selector: 'tabset-root',
  template: `<nz-tabset class="nav self" [nzTabBarStyle]="nzTabBarStyle" [nzSelectedIndex]="nzSelectedIndex" [nzTabBarGutter]="12" [nzSize]="'small'">
  <nz-tab (nzClick)="goto('home/index/swot')" nzTitle="主页"></nz-tab>
  <nz-tab (nzClick)="goto('home//index/swot/explain')" nzTitle="说明"></nz-tab>
  </nz-tabset>`,
  styles: [`
  .nav {
    text-align: center;
    background: #E0E0E0;
    top: 0;
  }
  `]
})
export class tabsetComponent implements OnInit{
  nzSelectedIndex: number;
  submenu: string;
  nzTabBarStyle = {
    'margin-bottom': 0,
    'background': '#E9E9E9',
    'user-select': 'none',
  }

  constructor(
    private router: Router,
    private activatedRoute:ActivatedRoute,
  ){}
  ngOnInit() {
    var that = this;
    //获取路由的数据
    if (/home\/list/g.test(location.href)) this.nzSelectedIndex = 0;
    else if (/home\/explain/g.test(location.href)) this.nzSelectedIndex = 1;
    this.router.events
      .filter(event => event instanceof NavigationEnd)
      .map(() => this.activatedRoute)
      .map(route => {
        while (route.firstChild) route = route.firstChild;
        return route;
      })
      .filter(route => route.outlet === 'primary')
      .mergeMap(route => route.data)
      .subscribe(event => {
        that.submenu = event.submenu;
        if (that.submenu === 'list') this.nzSelectedIndex = 0;
        else if (that.submenu === 'explain') this.nzSelectedIndex = 1;
      });
  }
  goto(path){
     this.router.navigate([path])
  }

}
